<template>
    <UDialog v-model:visible="settingDialog" title="设置" :showBtn="false" @close="closeHandle" width="40vw">
        <!-- <div class="form_item">
            <div class="label">设置时间:</div>
            <el-slider v-model="timeSlider" :min="0" :max="maxTime" :step="30" input-size="small"
                :format-tooltip="formatSliderTime" :marks="sliderMarks" tooltip-class="timeSliderTip"
                @input="handleTimeChange" @change="handleSetTime" />
        </div> -->
        <div class="form_item">
            <div class="label">漫游速度:</div>
            <el-slider v-model="speedSlider" :min="0" :max="10" :step="0.1" input-size="small"
                tooltip-class="timeSliderTip" @change="handleSetSpeed" />
        </div>
    </UDialog>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';
import { debounce } from '@/utils';
const { proxy } = getCurrentInstance();
const bus = proxy.$bus;

const settingDialog = ref(false);
const timeSlider = ref(0);
const speedSlider = ref(0);
const sliderMarks = ref({});
const maxTime = ref(1440);
onMounted(() => {
    initSliderMarks();
    bus.on("speedInfo", speed => {
        speedSlider.value = Number(Math.log2(speed).toFixed(1));
    });
    bus.on("envTime", time => {
        time = "" + time;
        let h = time.substring(0, time.length - 2);
        let m = time.substring(time.length - 2);
        timeSlider.value = Number(h) * 60 + Number(m);
    });
});
function open() {
    settingDialog.value = true;
    bus.emit("keyboardInput", false);
    bus.emit("getSpeed");
    // bus.emit("getTime");
}
function initSliderMarks() {
    for (let index = 0; index < maxTime.value; index++) {
        let h = Math.floor(index / 60);
        if (h == 3 || h == 6 || h == 9 || h == 12 || h == 15 || h == 18 || h == 21 || h == 24) {
            let m = index % 60;
            if (m == 0) {
                let h = Math.floor(index / 60);
                if (h == 0) {
                    h = "00:"
                } else if (h < 10) {
                    h = "0" + h + ":";
                } else {
                    h = h + ":"
                }
                sliderMarks.value[index] = h + "00";
            }
        }
    }
}
function formatSliderTime(val) {
    let h = Math.floor(val / 60);
    if (h == 0) {
        h = "00:"
    } else if (h < 10) {
        h = "0" + h + ":";
    } else {
        h = h + ":"
    }
    let m = val % 60;
    if (m == 0) {
        m = "00"
    }
    return h + m;
}
/**
 * 拖动过程中每隔100毫秒设置一次时间
 */
const handleTimeChange = debounce(() => {
    handleSetTime();
}, 100);
/**
 * 拖动结束设置时间
 */
function handleSetTime() {
    let time = formatSliderTime(timeSlider.value);
    time = time.replace(":", "");
    bus.emit("changeTime", time);
}
/**
 * 拖动结束设置漫游速度
 */
function handleSetSpeed() {
    let speed = Math.pow(2, speedSlider.value);
    // let speed = Math.log2(speedSlider.value);
    bus.emit("setSpeed", speed);
}
function closeHandle() {
    bus.emit("keyboardInput", true);
}
defineExpose({
    open
});
</script>
<style scoped lang="scss">
.form_item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;

    .label {
        width: 174px;
        color: #CFE7FA;
        font-size: 38px;
        flex-shrink: 0;
        margin-right: 20px;
    }

    .form_item_value {
        flex-shrink: 0;
        flex: 1;
    }
}



:deep(.el-slider__marks-stop) {
    display: none;
}

@media (max-width: 2560px) {
    :deep(.el-slider__runway) {
        height: 16px;
    }

    :deep(.el-slider__bar) {
        height: 16px;
        background-color: #21E0C5;
    }

    :deep(.el-slider__button) {
        height: 16px;
        width: 16px;
        display: flex;
        border: 2px solid #21E0C5;
    }

    :deep(.el-slider__button-wrapper) {
        height: 16px;
        width: 16px;
        top: 0px;
    }

    :deep(.el-slider__marks-text) {
        font-size: 14px;
        margin-top: 16px;
    }
}

@media (min-width: 2561px) {
    :deep(.el-slider__runway) {
        height: 30px;
    }

    :deep(.el-slider__bar) {
        height: 30px;
        background-color: #21E0C5;
    }

    :deep(.el-slider__button) {
        height: 30px;
        width: 30px;
        display: flex;
        border: 2px solid #21E0C5;
    }

    :deep(.el-slider__button-wrapper) {
        height: 30px;
        width: 30px;
        top: 0px;
    }

    :deep(.el-slider__marks-text) {
        font-size: 36px;
        margin-top: 30px;
    }
}
</style>
<style>
.timeSliderTip {
    font-size: 40px;
    padding: 10px;
}
</style>